<template>
  <a-modal v-bind="$attrs" v-on="$listeners">
    <template slot="footer">
      <a-button key="back" @click="form.resetFields()">
        重置
      </a-button>
      <a-button key="submit" type="primary" :loading="modalLoading" @click="handleValidate">
        提交
      </a-button>
    </template>
    <a-form :form="form">
      <a-form-item label="账户主体">
        <a-input
          placeholder="请输入名称"
          v-decorator="['userDesc', { rules: [{ required: true, message: '请输入4~20位的名称!', min: 1, max: 20 }] }]"
        />
      </a-form-item>
      <a-form-item label="用户名">
        <a-input
          placeholder="请输入账号"
          v-decorator="['username', { rules: [{ required: true, message: '请输入4~20位的账号!', min: 4, max: 20 }] }]"
        />
      </a-form-item>
      <a-form-item label="密码">
        <a-input
          :placeholder="`${status === MODAL_TYPE.EDIT ? '填入新密码,不修改时为空' : '请输入密码'}`"
          v-decorator="['password', { rules: [{ required: status === MODAL_TYPE.ADD, message: '请输入4~20位的密码!', min: 4, max: 20 }] }]"
        />
      </a-form-item>
      <a-form-item label="角色">
        <a-radio-group
          :disabled="status !== MODAL_TYPE.ADD"
          @change="userTypeChange"
          v-decorator="['userType', status === MODAL_TYPE.ADD ? { initialValue: 1 } : {}]"
        >
          <a-radio :value="1">
            媒体
          </a-radio>
          <a-radio :value="2">
            广告主
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <template v-if="!_isMedia">
        <a-form-item label="是否显示消耗和余额">
          <a-radio-group v-decorator="['showBalance', status === MODAL_TYPE.ADD ? { initialValue: 0 } : {}]">
            <a-radio :value="0">
              不显示
            </a-radio>
            <a-radio :value="1">
              显示
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="余额为0时是否停止计划">
          <a-radio-group v-decorator="['autoStop', status === MODAL_TYPE.ADD ? { initialValue: 0 } : {}]">
            <a-radio :value="0">
              不停止
            </a-radio>
            <a-radio :value="1">
              停止
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </template>
    </a-form>
  </a-modal>
</template>
<script>
import { MODAL_TYPE } from '../../../constant/index'
/**
 * @封装Modal弹窗
 */
export default {
  props: {
    /**
     * @模态框提交Loading
     */
    modalLoading: {
      type: Boolean,
      require: true,
    },
    /**
     * @模态框内是否选择了媒体
     */
    isMedia: {
      type: Boolean,
      require: true,
    },
    userTypeChange: {
      type: Function,
      default: () => {},
    },
    echoData: {
      type: Object,
      default: () => {},
    },
    status: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      MODAL_TYPE,
    }
  },
  beforeCreate() {
    const form = this.$form.createForm(this)
    this.$emit('forwardRef', form)
    this.form = form
  },
  mounted() {
    this.$nextTick(() => {
      this.setFields(this.status, this.echoData)
    })
  },
  watch: {
    echoData: {
      handler: (newVal, _) => {
        this.$nextTick(() => {
          this.setFields(status, newVal)
        })
      },
    },
  },
  methods: {
    handleValidate() {
      this.form.validateFields((errors, values) => {
        if (!errors) {
          const { id } = this.echoData
          this.$emit('submit', { ...values, id })
        }
      })
    },
    setFields(status, newVal) {
      if (status === MODAL_TYPE.EDIT || status === MODAL_TYPE.SHOW) {
        this.form.setFieldsInitialValue(newVal)
        this.form.setFieldsValue(newVal) //编辑或查看时回显数据的情况
      }
    },
  },
  computed: {
    _isMedia: {
      get: function() {
        if (this.status === MODAL_TYPE.ADD) {
          return this.isMedia
        } else {
          return this.echoData.userType === 2 ? false : this.echoData.userType === 1 ? true : false
        }
      },
      set: function(v) {
        this.$emit('update:isMedia', v)
      },
    },
  },
}
</script>
<style lang="scss" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
